<script setup>
import {ref, defineEmits} from 'vue'
import SvgIcon from "@/components/SvgIcon/index.vue";
import {completeOrder, transferOrder} from "@/api/mobile/order.js";
import {userOrderState} from "@/store/index.js";

const {proxy} = getCurrentInstance();

const emit = defineEmits(['refresh'])

const orderState = userOrderState();

const props = defineProps({
  itemValue: {
    type: Object,
    required: true
  }
})
const order = ref(props.itemValue)
const handleClick = async () => {
  proxy.$modal.confirm(
      '是否确认完成订单“' + order.value.name + '”同学的订单？' +
      "（提示：截图上传了吧？）"
  ).then(function () {
    completeOrder(order.value.id).then(res => {
      emit('refresh')
      proxy.$modal.msgSuccess(res.data)
    })
  })
}
const handleTransferOrder = async () => {
  proxy.$modal.confirm(
      '是否确认转让订单“' + order.value.name + '”同学的订单？'
  ).then(function () {
    transferOrder(order.value.id).then(res => {
      emit('refresh')
      proxy.$modal.msgSuccess(res.data)
    })
  })
}

const router = useRouter()
const handleUploadsOrder = async () => {
  if (props.itemValue.isUploads === 1) {
    proxy.$modal.msgSuccess("订单已经上传，请联系管理员后尝试！")
    return
  }
  orderState.setUpload(props.itemValue)
  router.push('/wxz/upload/order')

}
</script>


<template>
  <div class="task-item" @click="handleClick">
    <div class="task-nei">
      <!-- 顶部：时间 / 编号 -->
      <div class="item-head-flex">
        <div class="time-id">
          <SvgIcon icon-class="time" class="icon"/>
          {{ itemValue.createTime }} / 编号: {{ itemValue.id }}
        </div>
        <!-- 上传状态角标 -->
        <el-tag
            class="upload-tag"
            :type="itemValue.isUploads == 1 ? 'success' : 'info'"
            size="small"
        >
          {{ itemValue.isUploads == 1 ? '已上传' : '未上传' }}
        </el-tag>
      </div>

      <!-- 中间：宿舍 + 姓名 + 状态 -->
      <div class="item-body-flex">
        <div class="location" :class="{ highlight: itemValue.identity !== 0 }">
          <SvgIcon icon-class="school" class="icon"/>
          {{ itemValue.building }}#{{ itemValue.dormitory }}
        </div>
        <div class="name" :class="{ highlight: itemValue.identity !== 0 }">
          <SvgIcon icon-class="user" class="icon"/>
          {{ itemValue.name }}
        </div>
        <div class="status-container">
          维修中
          <SvgIcon icon-class="hourglass-full"/>
        </div>
      </div>

      <el-divider border-style="dashed" style="margin: 0"/>

      <!-- 底部：任务详情 -->
      <p class="item-footer">{{ itemValue.details }}</p>

      <!-- 操作按钮 -->
      <div class="footer-buttons">
        <el-button
            type="primary"
            icon="Collection"
            @click.stop="handleUploadsOrder"
            :disabled="itemValue.isUploads == 1"
        >
          协议上传
        </el-button>
        <el-button
            type="warning"
            icon="RefreshLeft"
            @click.stop="handleTransferOrder"
        >
          转让修单
        </el-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.task-item {
  position: relative;
  background-color: #fff;
  margin: 8px auto;
  width: 96%;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;

  &:hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }



  .task-nei {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;

    .item-head-flex {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      line-height: 11px;
      color: #8c92a0;

      .time-id {
        display: flex;
        align-items: center;

        .icon {
          margin-right: 4px;
        }
      }
    }

    .item-body-flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      line-height: 14px;

      .location,
      .name {
        display: flex;
        align-items: center;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        .icon {
          margin-right: 4px;
        }
      }

      .location {
        color: var(--color-role-student);
        flex: 1;

        &.highlight {
          color: var(--color-role-teacher);
        }
      }

      .name {
        color: var(--color-role-student);
        text-align: center;
        flex: 1;
        margin: 0 12px;

        &.highlight {
          color: var(--color-role-teacher);
        }
      }

      .status-container {
        color: var(--color-status-working);
        display: flex;
        align-items: center;
        gap: 4px;
      }
    }

    .item-footer {
      font-size: 14px;
      color: #444;
      text-align: center;
      line-height: 1.4;
      word-break: break-word;
      margin: 0;
    }

    .footer-buttons {
      display: flex;
      justify-content: space-between;
      margin-top: 6px;

      .el-button {
        flex: 1;

        &:first-child {
          margin-right: 8px;
        }
      }
    }
  }
}

</style>
